@charset "utf-8";

#study{
	margin: 0 auto;
	width: 1100px;
	height: 200px;
	border: 1px solid green;
}
#studyl{
	float: left;
	width: 15%;
	height: 200px;
	border-right:  1px solid green;

}
#studyl img{
    height: 100%;
    width: 100%;
}
#studyr{
	float: left;
	width: 85%;
	height: 200px;
	
}
#studyrt{
	height: 25%;	
}
#studyrb{
	height: 75%;
	
}

#s1{
	width: 100%;
	height: 100%;
   
}
#s1 span{
	display: block;
	height: 50px;
	width: 120px;
	border: 3px solid  #ff0066;
	float: left;
	margin-left: 20px;
	margin-top: 20px;
	text-align: center;
	line-height: 47px;
	
}
#s1 span:hover{
    /*filter:brightness(5.3);*/
	transition: 0.5s;
	border: 3px solid  #ff00ff;
	text-shadow: 2px 2px #ff0066;
	
}
#s1 span a{
	font-size: 25px;
	color: #ff00ff;
	text-decoration: none;
}
#s2{
	width: 100%;
	height: 100%;
    display: none;
}
#s2 span{
	display: block;
	height: 50px;
	width: 120px;
	border: 1px solid  #00ffff;
	float: left;
	margin-left: 20px;
	margin-top: 20px;
	text-align: center;
	line-height: 50px;
	box-shadow: -3px 3px   #00ffff;
}
#s2 span:hover{
     transform: perspective(200px) rotateX(20deg);
	/*transform: perspective(200px) rotateY(-20deg) ;*/
	transition: 1s;
}
#s2 span a{
	font-size: 25px;
	color: #00ffbf;
	text-decoration: none;
}
#s3{
	width: 100%;
	height: 100%;
    display: none;
}
#s3 div{
	width: 160px;
	height: 60px;
	float: left;
	margin-left: 15px;
	margin-top: 10px;
	border: 2px solid green;
	border-radius: 25px;
    text-align: center;
}
#s3 div:hover{
	background: green;
}
#s3 div img{
	width: 150px;
	height: 50px;
	position:relative;
    top:6%;
	border-radius: 20px;

}
#s4{
	width: 100%;
	height: 100%;
    display: none;
}
#s4 div{
	width: 160px;
	height: 60px;
	float: left;
	margin-left: 15px;
	margin-top: 10px;
	text-align: center;
    
}
#s4 div:hover{
	transition: 1s;
	background:  #ff751a;
	
    
}
#s4 div span{
	width: 160px;
	height: 50px;
    text-align: center;
    display: block;
    font-size: 25px;
	color: #00ffbf;
	line-height: 50px;
	text-decoration: none;
	background:  #ff751a;
}
#s5{
	width: 100%;
	height: 100%;
	display: none;
}
#s5 div{
	width: 160px;
	height: 60px;
	float: left;
	margin-left: 15px;
	margin-top: 10px;
	border: 2px solid #47d147;
    text-align: center;

}
#s5 div:hover{
	transition: 1s;
	box-shadow: 160px 0 #47d147 inset;
}
#s5 div span{
	width: 156px;
	height: 50px;
    text-align: center;
    display: block;
    font-size: 25px;
	color: #00ffbf;
	line-height: 50px;
	text-decoration: none;
	background:#47d147;
   
}
#s6{
	width: 100%;
	height: 100%;
	display: none;
	
}
#s6 div{
	width: 160px;
	height: 60px;
	float: left;
	margin-left: 15px;
	margin-top: 10px;
	border: 2px solid #ffaa00;
    text-align: center;

}
#s6 div span{
	width: 156px;
	height: 56px;
    text-align: center;
    display: block;
    font-size: 25px;
	color: #00ffbf;
	line-height: 50px;
	text-decoration: none;
	background:#ffaa00;
   
}
#s6 div span:hover{
	transition: 0.5s;
	transform: translate3d(-5px,-5px,0);
}
#s7{
	width: 100%;
	height: 100%;
	display: none;
	
}
#s7 div{
	width: 160px;
	height: 60px;
	float: left;
	margin-left: 15px;
	margin-top: 10px;
	border: 2px solid #ffcc99;
    text-align: center;

}
#s7 div span{
	width: 156px;
	height: 56px;
    text-align: center;
    display: block;
    font-size: 25px;
	color: #00ffbf;
	line-height: 50px;
	text-decoration: none;
	background:#ffcc99;
   
}
#s7 div span:hover{
	transition: 0.5s;
	transform: translate3d(5px,-5px,0);
}
#s8{
	width: 100%;
	height: 100%;
	display: none;
	
}
#s8 div{
	width: 160px;
	height: 56px;
	float: left;
	margin-left: 15px;
	margin-top: 10px;
	border: 2px solid #00ffff;
    text-align: center;

}
#s8 div span{
	width: 156px;
	height: 54px;
    text-align: center;
    display: block;
    font-size: 25px;
	color: #00ffbf;
	line-height: 50px;
	text-decoration: none;
	background:#00ffff;
   
}
#s8 div span:hover{
	transition: 1s;
	transform: rotateX(360deg);
}

#program{
	width: 1100px;
	height: 200px;
	border: 1px green solid;
	margin: 0 auto;
}
.bom{
	width: 130px;
	height: 50px;
	font-size: 15px;
	font-weight: bolder;
	margin-left: 18px;
	margin-top: 12px;
	color: white;
}
.bom a{
	color: white;
}
.A{-webkit-animation-name: PulseA;-ms-animation-name: PulseA; -moz-animation-name: PulseA;}
.B{-webkit-animation-name: PulseB; }
.C{-webkit-animation-name: PulseC; }
.D{-webkit-animation-name: PulseD; }
.E{-webkit-animation-name: PulseE; }
.A,.B,.C,.D,.E{ 
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:alternate;
	-ms-animation-duration: 3s;
	-ms-animation-iteration-count:infinite;
	-ms-animation-direction:alternate;
	-moz-animation-duration: 3s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-direction:alternate;
}
@-webkit-keyframes PulseA {
  from { background-color: red;   -webkit-box-shadow: 0 0 15px red; }
  50%  { background-color: green; -webkit-box-shadow: 0 0 25px  green; }
  to   { background-color:  blue; -webkit-box-shadow: 0 0 15px blue; }
}
@-ms-keyframes PulseA {
  from { background-color: red;   -ms-box-shadow: 0 0 15px red; }
  50%  { background-color: green; -ms-box-shadow: 0 0 25px  green; }
  to   { background-color:  blue; -ms-box-shadow: 0 0 15px blue; }
}
@-moz-keyframes PulseA {
  from { background-color: red;   -moz-box-shadow: 0 0 15px red; }
  50%  { background-color: green; -moz-box-shadow: 0 0 25px  green; }
  to   { background-color:  blue; -moz-box-shadow: 0 0 15px blue; }
}
@-webkit-keyframes PulseB {
  from { background-color: #66ff33; -webkit-box-shadow: 0 0 15px #9fff80; }
  50%  { background-color: #ff1ac6; -webkit-box-shadow: 0 0 25px #ff00ff; }
  to   { background-color: #00ffff; -webkit-box-shadow: 0 0 15px #00e5e6; }
}
@-webkit-keyframes PulseC {
  from { background-color: #3399ff; -webkit-box-shadow: 0 0 15px #80bfff; }
  50%  { background-color: #ff9999; -webkit-box-shadow: 0 0 25px #ffb3b3; }
  to   { background-color: #ff6600; -webkit-box-shadow: 0 0 15px #ffc299; }
}
@-webkit-keyframes PulseD {
  from { background-color: #ff6600; -webkit-box-shadow: 0 0 15px #e65c00; }
  50%  { background-color: #cc0066; -webkit-box-shadow: 0 0 25px #ff80bf; }
  to   { background-color: #ff5050; -webkit-box-shadow: 0 0 15px #ff8080; }
}
@-webkit-keyframes PulseE {
  from { background-color: #00cc66; -webkit-box-shadow: 0 0 15px #80ffbf; }
  50%  { background-color: #ffff00; -webkit-box-shadow: 0 0 25px #ffff4d; }
  to   { background-color: #66ff99; -webkit-box-shadow: 0 0 15px #b3ffcc; }
}

